<!--文章详情-->
<template>
  <div class="news-box">
    <div class="w1200">
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消息中心</el-breadcrumb-item>
      </el-breadcrumb>


      <div class="msg-cent">
        <div class="title">
          <h1>申请大数据开发套件A</h1>
          <p>申请工具只能按套申请，还需要申请以下工具</p>
        </div>

        <div class="deploy-box">
          <dl>
            <dt>工具名称：</dt>
            <dd>数据汇聚工具</dd>

            <dt>工具简介：</dt>
            <dd>提供丰富的采集汇聚能力，实现多源异构、跨部门、跨系统的离线数据采集以及实时数据采集能力支撑。</dd>

            <dt>工具运行资源：</dt>
            <dd>
              <div class="option">
                <h4>CPU资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择CPU资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

              <div class="option">
                <h4>内存资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择内存资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

              <div class="option">
                <h4>存储资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择存储资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </dd>
          </dl>
        </div>

        <div class="deploy-box">
          <dl>
            <dt>工具名称：</dt>
            <dd>数据开发工具</dd>

            <dt>工具简介：</dt>
            <dd>对完成治理的各种数据资源进行融合、合并、开发。</dd>

            <dt>工具运行资源：</dt>
            <dd>
              <div class="option">
                <h4>CPU资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择CPU资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

              <div class="option">
                <h4>内存资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择内存资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

              <div class="option">
                <h4>存储资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择存储资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </dd>
          </dl>
        </div>

        <div class="deploy-box">
          <dl>
            <dt>工具名称：</dt>
            <dd>数据分析与可视化工具</dd>

            <dt>工具简介：</dt>
            <dd>提供简单的拖拽和可视化的操作、丰富的组件和个性化支持，实现各种场景报表需求。</dd>

            <dt>工具运行资源：</dt>
            <dd>
              <div class="option">
                <h4>CPU资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择CPU资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

              <div class="option">
                <h4>内存资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择内存资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>

              <div class="option">
                <h4>存储资源</h4>
                <el-select v-model="optionsVal" clearable placeholder="请选择存储资源">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </dd>
          </dl>
        </div>

        <div class="resource">
          <h1>申请的工具需要依赖于Hadoop、MPP资源</h1>

          <div class="deploy-box">
            <dl>
              <dt>Hadoop资源：</dt>
              <dd>
                <div class="option">
                  <h4>CPU资源</h4>
                  <el-select v-model="optionsVal" clearable placeholder="请选择CPU资源">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <div class="option">
                  <h4>内存资源</h4>
                  <el-select v-model="optionsVal" clearable placeholder="请选择内存资源">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <div class="option">
                  <h4>存储资源</h4>
                  <el-select v-model="optionsVal" clearable placeholder="请选择存储资源">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </dd>
            </dl>
          </div>

          <div class="deploy-box">
            <dl>
              <dt>MPPDB资源：</dt>
              <dd>
                <div class="option">
                  <h4>CPU资源</h4>
                  <el-select v-model="optionsVal" clearable placeholder="请选择CPU资源">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <div class="option">
                  <h4>内存资源</h4>
                  <el-select v-model="optionsVal" clearable placeholder="请选择内存资源">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>

                <div class="option">
                  <h4>存储资源</h4>
                  <el-select v-model="optionsVal" clearable placeholder="请选择存储资源">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </dd>
            </dl>
          </div>
        </div>

        <div class="accessory-box">
          <div class="deploy-box ">
            <dl class="nobor">
              <dt>工具用途：</dt>
              <dd>
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入工具用途"
                  v-model="textareaVal">
                </el-input>
              </dd>

              <dt>上传附件：</dt>
              <dd>
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small"  icon="el-icon-upload2">上传附件</el-button>
                  <span slot="tip" class="el-upload__tip" >
                    <i class="el-icon-warning"></i>
                    支持doc/docx/jpeg/jpg/png/pdf/zip/rar/xls/xlsx文件，不超过10M
                  </span>
                </el-upload>
              </dd>
            </dl>
          </div>

          <div style="margin-top:50px;text-align: center">
            <el-button >取消</el-button>
            <el-button style="width: 150px" type="primary">提交订阅申请</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      options: [{
        value: '64G',
        label: '64G'
      }, {
        value: '128G',
        label: '128G'
      }, {
        value: '256G',
        label: '256G'
      }, {
        value: '1T',
        label: '1T'
      }],

      optionsVal : '',
      textareaVal : '',

      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    }
  },
  watch:{

  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  },
}
</script>

<style scoped lang="scss">
.breadcrumb{
  margin: 24px 0;
}

.msg-cent{
  padding: 45px;
  margin-bottom: 80px;
  border:1px solid #DDDDDD;
  .title{
    padding-bottom: 16px;
    border-bottom: 1px dashed #DDDDDD;
    h1{
      font-size: 32px;
      font-weight: 500;
      color: #333333;
      line-height: 45px;
      margin-bottom: 24px;
    }
  }

  .deploy-box{
    dl{
      padding: 20px 0;
      border-bottom: 1px dashed #DDDDDD;
      dt{
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 400;
        color: #4B5D6C;
        line-height: 22px;
        margin-bottom: 10px;
      }
      dd{
        margin-bottom: 20px;
        &:last-child{
          margin: 0;
        }
      }
    }

    .option{
      display: inline-block;
      border: 1px solid #CCD2D8;
      margin-right:16px;
      h4{
        height: 34px;
        line-height: 34px;
        background: #F9F9F9;
        text-align: center;
        border-bottom: 1px solid #CCD2D8;
        font-size: 12px;
        color: #1D1F24;
      }
      ::v-deep .el-input__inner{
        border: none;
      }
    }
  }
  .nobor{
    border: 0 !important;
  }

  .resource{
    margin: 16px 0;
    h1{
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      margin-bottom: 10px;
    }
  }
  .el-upload__tip{
    font-size: 12px;
    font-weight: 400;
    color: #919EAB;
    line-height: 20px;
    margin-left: 15px;
  }

  ::v-deep .el-upload-list{
    width: 470px;
    li{
      background: #F9F9F9;
      border-radius: 4px;
      margin-bottom:8px;
      padding: 6px;
      .el-upload-list__item-status-label{
        top: 8px;
      }
      .el-icon-close{
        top: 12px;
      }
    }
  }
}
</style>
